<template>
  <view class="tab-bar">
    <view
        class="tab-bar-item"
        v-for="(item, index) in tabBarItem"
        :key="index"
        @click="change(index)"
        :class="{ 'active': activeIndex === index }">
      <uni-icons
          :type="item.icon"
          size="20"
          :color="getColor(index)"/>
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import {ref, computed} from 'vue';

// 底部导航栏选项
const tabBarItem = ref([
  {
    icon: 'chat',
    text: '消息',
    url: '/pages/index/index'
  },
  {
    icon: 'staff',
    text: '联系人',
    url: '/pages/contacts/contacts'
  },
  {
    icon: 'color',
    text: '发现',
    url: '/pages/find/find'
  },
  {
    icon: 'person',
    text: '我的',
    url: '/pages/mine/mine'
  }
]);

// 当前选中项
const activeIndex = ref(0);

// 获取颜色
const getColor = computed(() => (index) => {
  return activeIndex.value === index ? '$an-color-primary' : '$an-text-color';
});

/* 选中项切换 */
function change(index) {
  activeIndex.value = index;
  uni.navigateTo({
    url: tabBarItem.value[index].url
  });
}
</script>

<style scoped lang="scss">
@import "../../style/index";

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background-color: $an-bg-color;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

  .tab-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: $an-text-color;
    font-size: $an-font-size-mini;

    &.active {
      color: $an-color-primary; // 选中状态的文字颜色
    }
  }
}
</style>
